import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import TypeSelectLayout from '@/layouts/TypeSelectLayout';
import TableInfoOpen from './components/TableInfoOpen';
import TableLegalAffairs from './components/TableLegalAffairs';
import LegalAffairsDetailModal from './components/LegalAffairsDetailModal';
import InfoOpenDetailModal from './components/InfoOpenDetailModal';
import LegalAffairsAddModal from './components/LegalAffairsAddModal';
import InfoOpenAddModal from './components/InfoOpenAddModal';

const HobbyInfo = () => {
  const detailModelRef = useRef({});
  const addModelRef = useRef({});
  const trendsDetailModelRef = useRef({});
  const trendsAddModelRef = useRef({});
  const [tableType, setTableType] = useState('legalAffairs');
  useEffect(() => {
    // dispatch({
    //   type: 'global/getEnums',
    //   payload: {
    //     names: ['dictSex'],
    //   },
    // });
  }, []);

  const tabs = [
    {
      id: 'legalAffairs',
      label: '管理法务区简介',
    },
    {
      id: 'otherInfo',
      label: '管理其他信息公开',
    },
  ];

  const onTabChange = id => {
    setTableType(id);
  };
  const openDetailModal = item => {
    detailModelRef.current.showModal(item.id);
  };
  const openAddCaresModal = id => {
    addModelRef.current.showModal(id);
  };
  const openAddInfoOpenModal = id => {
    trendsAddModelRef.current.showModal(id);
  };
  const openInfoOpenDetailModal = item => {
    trendsDetailModelRef.current.showModal(item.id);
  };

  return (
    <TypeSelectLayout tabs={tabs} hidePublish onTabChange={onTabChange}>
      {tableType === 'legalAffairs' ? (
        <TableLegalAffairs
          openDetailModal={openDetailModal}
          openAddCaresModal={openAddCaresModal}
        />
      ) : (
        <TableInfoOpen
          openInfoOpenDetailModal={openInfoOpenDetailModal}
          openAddInfoOpenModal={openAddInfoOpenModal}
        />
      )}
      <LegalAffairsDetailModal actionRef={detailModelRef} />
      <LegalAffairsAddModal actionRef={addModelRef} />
      <InfoOpenDetailModal actionRef={trendsDetailModelRef} />
      <InfoOpenAddModal actionRef={trendsAddModelRef} />
    </TypeSelectLayout>
  );
};

export default connect(({ informationOpen }) => ({
  informationOpen,
}))(HobbyInfo);
